import Icon from '@/components/Icon'
import Input from '@/components/Input'
import NavBar from '@/components/NavBar'
import { useHistory } from 'react-router-dom'
import styles from './index.module.scss'
import { useEffect, useRef, useState } from 'react'
import { useSelector } from 'react-redux'
import io from 'socket.io-client'
import { getTokenInfo } from '@/utils/storage'

const Chat = () => {
  const history = useHistory()
  // 用于缓存 socket.io 客户端实例
  const clientRef = useRef(null)
  // 用于操作聊天列表元素的引用
  const chatRef = useRef(null)
  // 聊天记录
  const [chatList, setChatList] = useState([
    // 放两条初始消息
    { type: 'robot', text: '亲爱的用户您好，小智同学为您服务。' },
    { type: 'user', text: '你好' },
  ])
  // 当前用户信息
  const photo = useSelector((state) => state.profile.user.photo)

  useEffect(() => {
    // 创建客户端实例
    const client = io('http://geek.itheima.net', {
      transports: ['websocket'],
      // 在查询字符串参数中传递 token
      query: {
        token: getTokenInfo().token,
      },
    })
    // 监听链接成功的事件
    client.on('connect', () => {
      // 向聊天记录中添加一条消息
      setChatList((chatList) => [
        ...chatList,
        { type: 'robot', text: '我现在恭候着您的提问。' },
      ])
    })
    // 监听收到消息的事件
    client.on('message', (data) => {
      // 向聊天记录中添加消息
      setChatList((chatList) => [
        ...chatList,
        { type: 'robot', text: data.msg },
      ])
    })

    // 将客户端实例缓存到 ref 引用中
    clientRef.current = client

    // 在组件销毁时关闭 socket.io 的连接
    return () => {
      client.close()
    }
  }, [])

  // 用户输入数据
  const [msg, setMsg] = useState('')
  // input输入值
  const onKeyup = (e) => {
    if (e.keyCode === 13) {
      // 通过 socket.io 客户端向服务端发送消息
      clientRef.current.emit('message', {
        msg,
        timestamp: Date.now(),
      })
      // 向聊天记录中添加当前发送的消息
      setChatList((chatList) => [...chatList, { type: 'user', text: msg }])
      // 清空表单
      setMsg('')
    }
  }

  // 监听聊天列表的变化
  useEffect(() => {
    chatRef.current.scrollTop = chatRef.current.scrollHeight
  }, [chatList])

  return (
    <div className={styles.root}>
      {/* 顶部导航栏 */}
      <NavBar className="fixed-header" onLeftClick={() => history.go(-1)}>
        小智同学
      </NavBar>

      {/* 聊天记录列表 */}
      <div className="chat-list" ref={chatRef}>
        {chatList.map((item, index) => {
          if (item.type === 'robot') {
            return (
              //  机器人的消息
              <div className="chat-item" key={index}>
                <Icon type="iconbtn_xiaozhitongxue" />
                <div className="message">{item.text}</div>
              </div>
            )
          } else {
            return (
              // 用户的消息
              <div className="chat-item user" key={index}>
                <img src={photo} alt="" />
                <div className="message">{item.text}</div>
              </div>
            )
          }
        })}
      </div>

      {/* 底部消息输入框 */}
      <div className="input-footer">
        <Input
          className="no-border"
          placeholder="请描述您的问题"
          value={msg}
          onChange={(e) => setMsg(e.target.value)}
          onKeyUp={onKeyup}
        />
        <Icon type="iconbianji" />
      </div>
    </div>
  )
}

export default Chat
